<template>
  <div>
    <div class="header">
      <span class="search-header">搜索用户数</span>
      <svg t="1653983870371" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2126" width="20" height="20"><path d="M509.92 795.84c157.904 0 285.92-128.016 285.92-285.92C795.84 352 667.808 224 509.92 224 352 224 224 352 224 509.92c0 157.904 128 285.92 285.92 285.92z m0 48C325.504 843.84 176 694.32 176 509.92 176 325.504 325.504 176 509.92 176c184.416 0 333.92 149.504 333.92 333.92 0 184.416-149.504 333.92-333.92 333.92z m-2.448-400.704h16a16 16 0 0 1 16 16v201.728a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16V459.136a16 16 0 0 1 16-16z m0-100.176h16a16 16 0 0 1 16 16v23.648a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-23.648a16 16 0 0 1 16-16z" p-id="2127"></path></svg>
    </div>
    <div class="main">
      <span class="main-title">12321</span>
      <span class="main-conter">17.1</span>
      <svg t="1654085296022" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2210" width="32" height="32"><path d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z" fill="#595BB3" p-id="2211"></path></svg>
      <svg t="1654085330814" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3254" width="32" height="32"><path d="M512 618.666667L298.666667 405.333333h426.666666L512 618.666667z" fill="#595BB3" p-id="3255"></path></svg>
    </div>
    <div class="footer">
      <div class="charts" ref="charts"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "",
  mounted() {
    let lineCharts = echarts.init(this.$refs.charts);
    lineCharts.setOption({
      xAxis:{
        show:false,
        type:'category',
        
      },
      yAxis:{
        show:false
      },
      series:[
        {
          type:'line',
          data:[10,7,33,12,48,9,29,10,44],
          smooth:true,
          itemStyle:{
          opacity:0
          },
          lineStyle:{
            color:'blue'
          },
          //颜色
          areaStyle:{
            color:{
              type:'linear',
              x:0,
              y:0,
              x2:0,
              y2:1,
              colorStops:[
                {
                  offset:0,
                  color:'blue'
                },
                {
                  offset:1,
                  color:'#fff'
                }
              ],
              global:false,
            }
          }
        }
      ],
      grid:{
        left:-15,
        top:0,
        right:0,
        bottom:0
      }
    });
  },
};
</script>

<style scoped>
.header{
  display: flex;
  align-items: center;
}
.search-header{
  margin-right: 20px;
}
.main {
  margin: 10px 0;
  display: flex;
  align-items: center;
}
.main-title{
  margin-right: 30px;
}
.main-conter{
  margin-right: 5px;
}
.charts{
  width: 100%;
  height: 50px;
}
</style>